<template>
	<view class="borderStyle">
		<text class="fontStyle">历史申请记录:</text>
	</view>
	<view class="divider"></view>
	<view>
		<!-- 表头 -->
		<view class="table-header" style="font-size: 25rpx;">
			<view class="header-item" v-for="(header, index) in tableHeaders" :key="index">
				{{ header }}
			</view>
		</view>

		<!-- 表格数据 -->
		<view v-for="(item, rowIndex) in tableData" :key="rowIndex" class="row"
			:class="{ 'even-row': rowIndex % 2 === 0, 'odd-row': rowIndex % 2 !== 0 }">
			<view class="cell">{{ item.autoOrderId }}</view>
			<view class="cell">{{ item.userName }}</view>
			<view class="cell">{{ item.autoType }}</view>
			<view class="cell">{{ item.submitTime }}</view>
			<view class="cell" @click="jump(item.autoOrderId)" style="color: #409EFF;">详情</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// searchVal: '',
				tableHeaders: ['工单号', '姓名', '申请车型', '提交时间', '详情'],
				tableData: [],

			};
		},
		methods: {
			getAutoOrderData() {
				uni.request({
					url: 'http://localhost:8088/getAutoOrder?userId=' + localStorage.getItem('userId') + '&role=' +
						localStorage.getItem('currentRole'),
					method: 'GET',
					success: (res) => {
						if (res.data.code === '0') {
							console.log(res.data);
							// 只提取需要的字段
							this.tableData = res.data.data.map(item => ({
								autoOrderId: item.autoOrderId,
								userName: item.userName,
								autoType: item.autoType,
								submitTime: item.submitTime
							}));
						} else {
							uni.showToast({
								title: '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			jump(orderId) {
				uni.navigateTo({
					url: "/pages/autoApplicationDetail/autoApplicationDetail?orderId=" + orderId
				})
			},
		},
		created() {
			this.getAutoOrderData();
		}
	}
</script>

<style>
	.table-header {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #f1f1f1;
	}

	.header-item {
		flex: 1;
		/* border: 1px solid #ebeef5; */
		padding: 10px;
		text-align: center;
	}

	.row {
		display: flex;
		background-color: #ffffff;
		/* 设置默认背景色 */
	}

	.cell {
		flex: 1;
		border: 1rpx solid ##ebeef5;
		padding: 10px;
		text-align: center;
	}

	.even-row {
		background-color: #ffffff;
		/* 设置偶数行的背景色 */
	}

	.odd-row {
		background-color: #f6f8fa;
		/* 设置奇数行的背景色 */
	}

	.divider {
		margin: 20rpx;
		background: #dcdfe6;
		width: 95%;
		height: 1rpx;
	}

	.borderStyle {
		margin-top: 30rpx;
		margin-left: 30rpx;
		/* margin-bottom: 10rpx; */
	}

	.fontStyle {
		font-size: 40rpx;
		font-weight: bold;
	}
</style>